import type { FC } from 'react';
import { View } from 'react-native';
import { useSafeState } from 'ahooks';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { TabPageView } from '@/components';
import Tabs from './tabs';
import styles from './styles';
import type { FilterTabsProps } from './types';

const FilterTabs: FC<FilterTabsProps> = (props) => {
  const { filters = [], children } = props;
  const { top } = useSafeAreaInsets();
  const [index, setIndex] = useSafeState(0);

  const wrapperStyles = [
    styles.container, {
      paddingTop: top
    }
  ];

  return (
    <View style={wrapperStyles}>
      <Tabs
        index={index}
        filters={filters}
        onChange={setIndex}
        search={props.search}
      />
      <TabPageView
        page={index}
        onChange={setIndex}
        pages={filters.map(item => {
          return {
            key: item.value,
            page: children?.(item, setIndex)
          }
        })}
      />
    </View>
  );
}

export default FilterTabs;